<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 16:29:27
 * @LastEditTime: 2023-12-18 16:26:26
 * @LastEditors: huangshuai 
-->
<template>
  <el-dialog v-model="dialogVisible" title="推送用户" width="70%">
    <el-form :model="form" style="display: flex; flex-wrap: wrap">
      <el-form-item label="地址:" label-width="80">
        <el-input
          v-model="form.address"
          placeholder="输入地址进行搜索"
          @keyup.enter.native="getData"
          @clear="getData"
          clearable
        />
      </el-form-item>
      <el-form-item style="margin-left: 15px">
        <el-button type="primary" @click="getData">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        align="center"
        prop="username"
        label="用户名"
        width="180"
      />
      <el-table-column align="center" prop="address" label="地址" width="180" />
      <el-table-column
        align="center"
        prop="userScore"
        label="信誉分数"
        width="180"
      />

      <el-table-column align="center" label="用户角色类型" width="180">
        <template #default="scope">
          <span v-if="scope.row.userType === '0'"> 社区业主</span>

          <span v-else-if="scope.row.userType === '1'">社区管理员</span>
          <span v-else-if="scope.row.userType === '2'">系统管理员</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
        width="180"
      />
      <el-table-column align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleSend(scope.row)"
            >推送用户</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 95%; margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { getListUserInfo } from "@/api/user";
import { addReportInfoToUser } from "@/api/manager";
import { ElMessage } from "element-plus";
const form = reactive({
  address: "",
});
const emits = defineEmits(["getListData"]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const dialogVisible = ref<boolean>(false);
const loading = ref<boolean>(false);
var bePushedUserInfo = ref<any>();
const showDialog = (data: any) => {
  bePushedUserInfo.value = data;

  tableData.value = [];
  dialogVisible.value = true;
  getData();
};
const getData = async () => {
  loading.value = true;
  await getListUserInfo({
    page: currentPage.value,
    pageSize: pageSize.value,
    address: form.address,
  }).then((res: any) => {
    total.value = +res.total;
    tableData.value = res.data;
  });
  loading.value = false;
};
const tableData = ref<any>([]);
const handleSend = (data: any) => {
  addReportInfoToUser({
    content: bePushedUserInfo.value.content,
    connectReportId: bePushedUserInfo.value.id,
    reportCategory: bePushedUserInfo.value.reportCategory,
    pictureUrl: bePushedUserInfo.value.pictureUrl,
    userId: data.id,
  }).then((res: any) => {
    ElMessage({
      message: res.message + "==>" + data.username,
      type: "success",
    });
    emits("getListData");
    // dialogVisible.value = false;
  });
};

watch(
  () => [pageSize.value, currentPage.value],
  () => {
    getData();
  }
);
defineExpose({
  showDialog,
});
//-------------------------
//分页
//-------------------------
</script>

<style scoped lang="less"></style>
